<template>
	<wsPage title="中转物流列表">
		<div slot="page_operate">
			<Button  @click="refresh">
                <Icon type="refresh"></Icon>
                <span>刷新</span>
            </Button>
		</div>
		<!--统计选项-->
		<Row class="tab-demo">
			<Col span="24">
				<Button :class="{'ws-btn-active': queryParams.model.type == 0}" @click="pendingQuery">待处理(
	                	<span class="ws-text-red" v-text="stat.count1"></span>)</Button>
	            <!--<Button :class="{'ws-btn-active': queryParams.model.type == 1}" @click="overQuery">已处理(
	                	<span class="ws-text-red" v-text="stat.count2"></span>)</Button>-->
			</Col>
		</Row>
		<wsSmPanel :page="table.page" @simple-query="query" @page-change="query">
			<div slot="query_form">
				<Form :model="queryForm" :label-width="100" inline>
					<FormItem label="订单编号">
						<Input v-model="queryParams.model.sn" placeholder="请输入"></Input>
					</FormItem>
					<FormItem label="运单号">
						<Input v-model="queryParams.model.trackingNo" placeholder="请输入"></Input>
					</FormItem>
					<FormItem label="商家名称">
						<Input v-model="queryParams.model.shop" placeholder="请输入"></Input>
					</FormItem>
					<FormItem label="买家留言">
						<Input v-model="queryParams.model.notes" placeholder="请输入"></Input>
					</FormItem>
					<FormItem label="时间区间">
						<Row>
			                <Col span="11">
			                    <FormItem>
			                        <DatePicker type="date" placeholder="查询开始时间" v-model="queryParams.model.searchStartTime" @on-change="dateConfirm"></DatePicker>
			                    </FormItem>
			                </Col>
			                <Col span="2" style="text-align: center">-</Col>
			                <Col span="11">
			                    <FormItem>
			                        <DatePicker type="date" placeholder="查询结束时间" v-model="queryParams.model.searchEndTime" @on-change="dateConfirm"></DatePicker>
			                    </FormItem>
			                </Col>
			            </Row>      
			        </FormItem>
				</Form>
			</div>
			<div slot="list_operate">
			</div>
			<div slot="list_data">
				<ws-table :data="table.data" style="width: 100%">
					<ws-table-column align="center" type="selection"  fixed="left"></ws-table-column>
					<ws-table-column align="center" prop="sn" label="订单编号" fixed="left" ></ws-table-column>
					<ws-table-column align="center" label="订单信息" min-width="180">
						<template slot-scope="scope">
							<table style="width:100%">
								<tr v-for="item in scope.row.items">
									<td style="width: 80px">
										<img :src="item.thumbnail" style="width:80px;height:80px;margin: 0 5px;"/>
									</td>
									<td style="width:100%">
										<span v-text="item.localName"></span>
									</td>
								</tr>
							</table>
						</template>
					</ws-table-column>
					<ws-table-column align="center" prop="shop" label="商家" ></ws-table-column>
					<ws-table-column align="center" label="快递信息" >
						<template slot-scope="scope">
							<span>快递单号:{{scope.row.trackingNo}}</span><br>
							<span>快递公司:{{scope.row.expressName}}</span>
						</template>
					</ws-table-column>
					<ws-table-column align="center" label="收件人" >
						<template slot-scope="scope">
							<p>{{scope.row.memberConsignee}}</p>
							<p>{{scope.row.memberPhone}}</p>
						</template>
					</ws-table-column>
					<ws-table-column align="center" prop="memberFullAddress" label="收货地址" ></ws-table-column>
					<ws-table-column align="center" prop="createOrderDate" label="下单时间" ></ws-table-column>
					<ws-table-column align="center" prop="payDate" label="支付时间" ></ws-table-column>
					<ws-table-column align="center" prop="lastStationDate" label="上站发出时间" ></ws-table-column>
					<ws-table-column align="center" prop="memo" label="买家留言" ></ws-table-column>
					<ws-table-column align="center" label="当前状态" fixed="right">
						<template slot-scope="scope">
							<Tag v-if="scope.row.status == 1" color="blue">已发货</Tag>
							<Tag v-if="scope.row.status == 2" color="green">已签收</Tag>
							<Tag v-if="scope.row.status == 3" color="green">已处理</Tag>
						</template>
					</ws-table-column>
					<ws-table-column align="center"  label="操作" fixed="right">
						<template slot-scope="scope">
							<Button @click="openMask(scope.row)" type="text" size="small">流转历史</Button>
							<Button v-if="!isSuperMgr && scope.row.status == 1" @click="showModal1(scope.row)" type="text" size="small">签收</Button>
							<Button v-if="!isSuperMgr && scope.row.status == 2" @click="showModal2(scope.row)" type="text" size="small">中转</Button>
						</template>
					</ws-table-column>
				</ws-table>
			</div>
		</wsSmPanel>

		<!--商品签收-->
		<wsModal v-model="modal1.show" title="商品签收" @on-ok="modal1Ok" @on-cancel="modal1Cancel">
			<Alert type="warning">请确认订单商品已经到本中转仓!!</Alert>
			<Form ref="modal1from" :model="modal1.model" :rules="modal1.rules" :label-width="100">
				<FormItem label="订单编号" required>
					<span v-text="modal1.model.sn"></span>
				</FormItem>
				<FormItem label="备注" prop="memo">
					<Input v-model="modal1.model.memo" placeholder="请输入" type="textarea" :rows="3"></Input>
				</FormItem>
			</Form>
		</wsModal>

		<!--审核翻译模态框-->
		<wsModal v-model="modal2.show" title="商品中转" @on-ok="modal2Ok" @on-cancel="modal2Cancel">
			<Alert type="warning">请根据物流中转流程选择中转方式!!</Alert>
			<Form ref="modal2from" :model="modal2.model" :rules="modal2.rules" :label-width="100">
				<FormItem label="订单编号" required>
					<span v-text="modal2.model.sn"></span>
				</FormItem>
				<FormItem label="中转方式" required>
					<RadioGroup v-model="modal2.model.type" @on-change="changeType">
						<Radio :label="1">直邮用户</Radio>
						<Radio :label="2">中转仓</Radio>
					</RadioGroup>
				</FormItem>
				<FormItem label="中转仓库" prop="expressAddressId" v-show="modal2.model.type == 2" required>
					<Select v-model="modal2.model.expressAddressId" filterable @on-change="expressAddressChange">
		                <Option v-for="item in modal2.fields.transfers" :value="item.wKey" :key="item.wKey">{{ item.wValue }}</Option>
		            </Select>
				</FormItem>
				<FormItem label="快递公司" prop="expressId">
					<Select v-model="modal2.model.expressId" filterable>
		                <Option v-for="item in modal2.fields.expresses" :value="item.value" :key="item.value">{{ item.label }}</Option>
		            </Select>
				</FormItem>
				<FormItem label="快递单号" prop="trackingNo">
					<Input v-model="modal2.model.trackingNo" placeholder="请输入"></Input>
				</FormItem>
				<FormItem label="收件人" required>
					<span >{{modal2.model.consignee}}</span>
				</FormItem>
				<FormItem label="联系方式" required>
					<span >{{modal2.model.phone}}</span>
				</FormItem>
				<FormItem label="邮寄地址" required>
					<span >{{modal2.model.address}}</span>
				</FormItem>
			</Form>
		</wsModal>
	</wsPage>
</template>
<script>
	import Util from "../../../common/util.js";

	export default {
		data() {
			return {
				table: {
					data: [],
					page: {
						total: 0, //总条数
						pageNum: 1, //当前页
						pageSize: 10 //每页显示条数
					},
					selection: [], //选中
					editrow: null
				},
				queryParams: {
					model: {
						type: 0,
						sn: '',
						shop: '',
						trackingNo:'',
						notes:'',
						searchStartTime:'',
						searchEndTime:''
					}
				},
				stat: {
					count1: 0,
					count2: 0
				},
				modal1: {
					show: false,
					model: {
						sn: '',
						memo: ''
					},
					rules: {
						memo: [{required: true, message: '必须填写备注信息'}]
					}
				},
				modal2: {
					show: false,
					fields: {
						transfers: [], //中转仓列表
						expresses: [], //快递公司
						transferMap: {} //中转仓详情
					},
					model: {
						sn: '',
						type: 1, //1.直邮用户 2.中转
						expressAddressId: '' ,//快递地址ID
						expressId: '', //快递公司编号
						trackingNo: '',
						consignee: '',
						phone: '',
						address: ''
					},
					rules: {
						expressId: [{required: true, message: '请选择快递公司'}],
						trackingNo: [{required: true, message: '请输入快递单号'}]
					}
				},
			};
		},
		computed: {
			/**
			 * 表格行是否为选中状态
			 */
			isTableSelected() {
				return this.table.selection.length > 0;
			},
			isSuperMgr() {
				return this.$store.getters.auth_user.superMgr;
			}
		},
		mounted() {
			this.init();
		},
		methods: {

			//查询开始时间段必填
			dateConfirm(){
				let searchStartTime = this.queryParams.searchStartTime;
				let searchEndTime = this.queryParams.searchEndTime;
				if (searchStartTime != null ||searchStartTime != '') {
					searchEndTime = new Date();
				} else if (searchEndTime != null || searchEndTime !='') {
					searchStartTime = searchEndTime;
				}
			},
			//刷新
			refresh() {
				
			    this.queryParams.model.searchStartTime = '';
				this.queryParams.model.searchEndTime = '';
				this.table.data = [];
				this.table.page.total = 0; //总条数
				this.table.page.pageNum = 1; //当前页
				this.table.page.pageSize = 10; //每页显示条数
				this.table.selection = []; //选中
				this.init();
			},
			init() {
				this.query();
				this.initFields();
				this.count();
			},
			/**
			 * 表单查询
			 */
			query() {
				let pageSize = this.table.page.pageSize;
				let pageNum = this.table.page.pageNum;
				const _this = this;
				this.axios
					.get("/ws/ops/v2/logistics/pending/" + pageSize + "/" + pageNum, {
						params: _this.queryParams.model
					})
					.then(response => {
						var res = response.data;
						var resMeta = res.meta;
						if(0 == resMeta.code) {
							_this.buildPageData(res.data);
						} else {
							_this.$Message.warning(resMeta.message);
						}
					});
			},
			/**
			 * 构建表格数据
			 */
			buildPageData(data_) {
				console.log(data_);	
				this.table.data = data_.list;
				this.table.page.total = data_.total;
			},		
			count() {
				const _this = this;
				this.axios.get('/ws/ops/v2/logistics/stat').then(response => {
					var res = response.data;
					var resMeta = res.meta;
					if(0 == resMeta.code) {
						let resdata = res.data;
						_this.stat.count1 = resdata.stat1;
						_this.stat.count2 = resdata.stat2;
					} else {
						_this.$Message.warning(resMeta.message);
					}
				});
			},
			/**
			 * 初始化属性
			 */
			initFields() {
				this.initExpress();
				this.initTransfers();
			},
			/**
			 * 初始化物流信息
			 */
			initExpress() {
				const _this = this;
				this.axios.get('/ws/ops/expresss/findvalue').then(response => {
					var res = response.data;
					var resMeta = res.meta;
					if(0 == resMeta.code) {
						_this.modal2.fields.expresses = res.data;
					} else {
						_this.$Message.warning(resMeta.message);
					}
				});
			},
			/**
			 * 初始化中转仓列表
			 */
			initTransfers() {
				const _this = this;
				this.axios.get('/ws/ops/v2/transferstorehouses?languageCode=zh').then(response => {
					var res = response.data;
					var resMeta = res.meta;
					if(0 == resMeta.code) {
						_this.modal2.fields.transfers = res.data;
					} else {
						_this.$Message.warning(resMeta.message);
					}
				});
			},
			/**
			 * 待处理
			 */
			pendingQuery() {
				
			},
			/**
			 * 已处理
			 */
			overQuery() {
				
			},
			/**
			 * 显示签收
			 */
			showModal1(row_) {
				this.table.editrow = row_;
				this.modal1.model.sn = row_.sn;
				this.modal1.show = true;
			},
			/**
			 * 显示中转
			 */
			showModal2(row_) {
				this.table.editrow = row_;
				//切换为当前用户的信息
				this.modal2.model.sn = row_.sn;
				this.modal2.model.consignee = row_.memberConsignee;
				this.modal2.model.phone = row_.memberPhone;
				this.modal2.model.address = row_.memberFullAddress;
				this.modal2.show = true;
			},
			modal1Ok() {
				this.$refs['modal1from'].validate((valid) => {
					if(valid) {
						this.modal1Submit();
					}
				});
			},
			modal1Submit() {
				const _this = this;
				let row_  = this.table.editrow;
				let postData = {
					id: row_.id,
					memo: this.modal1.model.memo
				};
				this.axios
					.put("/ws/ops/v2/logistics/sign", postData)
					.then(response => {
						var res = response.data;
						var resMeta = res.meta;
						if(0 == resMeta.code) {
							_this.$Message.success('物流签收成功');
							_this.modal1Cancel();
							_this.query();
						} else {
							_this.$Message.warning(resMeta.message);
						}
					});
			},
			modal1Cancel() {
				this.modal1.model.sn = '';
				this.modal1.model.memo = '';
				this.modal1.show = false;
			},
			changeType(val) {
				if(2 == val) {
					this.modal2.rules['expressAddressId'] = [{required: true, message: '请选择中转仓'}];
					let expressAddressId = this.modal2.model.expressAddressId;
					if(expressAddressId) {
						this.expressAddressChange(expressAddressId);
					}
				} else {
					this.modal2.rules['expressAddressId'] = [];
					let row_ = this.table.editrow;
					//切换为当前用户的信息
					this.modal2.model.consignee = row_.memberConsignee;
					this.modal2.model.phone = row_.memberPhone;
					this.modal2.model.address = row_.memberFullAddress;
				}
			},
			modal2Ok() {
				console.log(1);
				this.modal2Submit();
				//this.$refs['modal2from'].validate((valid) => {
				//	if(valid) {
						
				//	}
				//});
			},
			/**
			 * 提交中转
			 */
			modal2Submit() {
				const _this = this;
				let row_  = this.table.editrow;
				let postData = {
					id: row_.id,
					type: this.modal2.model.type,
					expressAddressId: this.modal2.model.expressAddressId,
					expressId: this.modal2.model.expressId,
					trackingNo: this.modal2.model.trackingNo,
					consignee: this.modal2.model.consignee,
					phone: this.modal2.model.phone,
					address: this.modal2.model.address
				};
				this.axios
					.put("/ws/ops/v2/logistics/transfer", postData)
					.then(response => {
						var res = response.data;
						var resMeta = res.meta;
						if(0 == resMeta.code) {
							_this.$Message.success('物流中转成功');
							_this.modal2Cancel();
							_this.query();
						} else {
							_this.$Message.warning(resMeta.message);
						}
					});
			},
			modal2Cancel() {
				this.modal2.show = false;
				this.modal2.model.type = 1;
				this.modal2.model.expressAddressId = '';
				this.modal2.model.expressId = '';
				this.modal2.model.trackingNo = '';
				this.modal2.model.consignee = '';
				this.modal2.model.phone = '';
				this.modal2.model.address = '';
				this.$refs['modal2from'].resetFields();
			},
			/**
			 * 物流中转仓地址发送变化
			 */
			expressAddressChange(val) {
				if(!val) {
					return;
				}
				let transferInfo = this.modal2.fields.transferMap[val];
				if(!transferInfo) {
					this.initTransferInfo(val, this.initTransferData);
				} else {
					this.initTransferData(transferInfo);
				}
			},
			/**
			 * 设置中转仓数据
			 */
			initTransferData(data) {
				this.modal2.fields.transferMap[data.id] = data;
				this.modal2.model.consignee = data.consignee;
				this.modal2.model.phone = data.consigneePhone;
				this.modal2.model.address = data.address;
			},
			/**
			 * 初始化中转仓信息
			 */
			initTransferInfo(transferId, callback) {
				const _this = this;
				this.axios.get('/ws/ops/v2/transferstorehouses/' + transferId).then(response => {
					var res = response.data;
					console.log(res);
					var resMeta = res.meta;
					if(0 == resMeta.code) {
						callback(res.data);
					} else {
						_this.$Message.warning(resMeta.message);
					}
				});
			}
		}
	};
</script>

<style scoped>
	.tab-demo {
		margin-bottom: 10px;
	}
</style>

<!-- css start -->